<template>
  <div class="good-list-outer-outer">
    <div style="padding: 8px 8px 16px 16px">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <HomeOutlined/>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          商品列表
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="state.primary_type!=null">
          <span>{{ state.primary_type.type }}</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="state.secondary_type!=null">
          <span>{{ state.secondary_type.type }}</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-if="state.tertiary_type!=null">
          <span>{{ state.tertiary_type.type }}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-row justify="space-between" align="top">
      <div>
        <!--      <a-col :xs="24" :md="24" :lg="0">-->
        <!--        <basic-button @click="showSelectionDrawerState=true" inverseColor="true">展示筛选栏</basic-button>-->
        <!--        <a-drawer-->
        <!--            title="Basic Drawer"-->
        <!--            placement="right"-->
        <!--            width="100vw"-->
        <!--            :closable="true"-->
        <!--            v-model:visible="showSelectionDrawerState"-->
        <!--            :after-visible-change="afterShowSelectionDrawerStateChange"-->
        <!--        >-->
        <!--          <div style="padding-bottom: 60px ">-->
        <!--            <basic-collapse :original-selection="1" @change="changeItemSelection" style="padding: 0">-->
        <!--              <basic-collapse-item  v-model:selectionIndex="itemSelectionIndex" title="商品大小" v-for="i in 10">-->
        <!--                <basic-input v-for="j in 8"></basic-input>-->
        <!--              </basic-collapse-item>-->
        <!--            </basic-collapse>-->
        <!--          </div>-->
        <!--          <div style="position:fixed;height: 60px;bottom: 0;right: 0;left: 0;z-index: 9999;background-color: white">-->
        <!--            <div style="display: flex;flex-direction: row;justify-content:space-around;align-items: center;height: 100%;width: 100%">-->
        <!--              <basic-button>111111111111</basic-button>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </a-drawer>-->
        <!--      </a-col>-->
        <!--      <a-col :xs="0" :md="0" :lg="6">-->
        <!--        <basic-card style="width: 100%" :hoverMove="false" :hovered="true" :radius="false" :padding="true">-->
        <!--          <basic-collapse :original-selection="1" @change="changeItemSelection">-->
        <!--            <basic-collapse-item  v-model:selectionIndex="itemSelectionIndex" title="adad" v-for="i in 10">-->
        <!--              <basic-input v-for="j in 8"></basic-input>-->
        <!--            </basic-collapse-item>-->
        <!--          </basic-collapse>-->
        <!--        </basic-card>-->
        <!--      </a-col>-->
        <!--      :md="24" :lg="18"-->
      </div>

      <a-col :span="24">
        <div style="display: flex;flex-direction: column;align-items: stretch;">
          <table>
            <tbody>
            <tr>
              <td style="vertical-align: top;white-space: nowrap;width: 100px">
                <div class="good-list-font" style="display: inline-block;margin-right: 10px">
                  一级类型
                </div>
              </td>
              <td>
                <div>
                  <a-radio-group name="primary_type" v-model:value="state.primary_type" @change="select1">
                    <a-radio :value="null">
                      <div class="good-list-font">
                        All
                      </div>
                    </a-radio>
                    <a-radio v-for="primaryType in primaryTypeList" :value="primaryType">
                      <div class="good-list-font">
                        {{ primaryType.type }}
                      </div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </td>
            </tr>
            <tr v-if="secondaryTypeList!=null&&secondaryTypeList.length>0">
              <td style="margin-right: 15px;width: 100px;    vertical-align: top;">
                <div class="good-list-font">
                  二级类型
                </div>
              </td>
              <td>
                <div>
                  <a-radio-group name="secondary_type" @change="select2" v-model:value="state.secondary_type">
                    <a-radio :value="null">
                      <div class="good-list-font">
                        All
                      </div>
                    </a-radio>
                    <a-radio v-for="secondaryType in secondaryTypeList" :value="secondaryType">
                      <div class="good-list-font">
                        {{ secondaryType.type }}
                      </div>
                    </a-radio>
                  </a-radio-group>

                </div>
              </td>
            </tr>
            <tr v-if="tertiaryTypeList!=null&&tertiaryTypeList.length>0">
              <td style="margin-right: 15px;width: 100px;    vertical-align: top;">
                <div class="good-list-font">
                  三级类型
                </div>
              </td>
              <td>
                <div>
                  <a-radio-group name="tertiary_type" v-model:value="state.tertiary_type" @change="select3">
                    <a-radio :value="null">
                      <div class="good-list-font">
                        All
                      </div>
                    </a-radio>
                    <a-radio v-for="tertiaryType in tertiaryTypeList" :value="tertiaryType">
                      <div class="good-list-font">
                        {{ tertiaryType.type }}
                      </div>
                    </a-radio>
                  </a-radio-group>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
          <!--            <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
          <!--              <div class="good-list-font">-->
          <!--                一级类型-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div style="display: inline-block;flex: 1 1 auto">-->
          <!--              <a-radio-group name="primary_type" v-model:value="state.primary_type" @change="select1">-->
          <!--                <a-radio :value="null">-->
          <!--                  <div class="good-list-font">-->
          <!--                    All-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--                <a-radio v-for="primaryType in primaryTypeList" :value="primaryType">-->
          <!--                  <div class="good-list-font">-->
          <!--                    {{ primaryType.type }}-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--              </a-radio-group>-->
          <!--            </div>-->
          <!--          <div v-if="secondaryTypeList!=null&&secondaryTypeList.length>0" style="display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;flex-wrap: nowrap;">-->
          <!--            <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
          <!--              <div class="good-list-font">-->
          <!--                二级类型-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div style="display: inline-block;flex: 1 1 auto">-->
          <!--              <a-radio-group name="secondary_type" @change="select2" v-model:value="state.secondary_type">-->
          <!--                <a-radio :value="null">-->
          <!--                  <div class="good-list-font">-->
          <!--                    All-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--                <a-radio v-for="secondaryType in secondaryTypeList" :value="secondaryType">-->
          <!--                  <div class="good-list-font">-->
          <!--                    {{ secondaryType.type }}-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--              </a-radio-group>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div v-if="tertiaryTypeList!=null&&tertiaryTypeList.length>0" style="display: flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;flex-wrap: nowrap;">-->
          <!--            <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
          <!--              <div class="good-list-font">-->
          <!--                三级类型-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div style="display: inline-block;flex: 1 1 auto">-->
          <!--              <a-radio-group name="tertiary_type" v-model:value="state.tertiary_type" @change="select3">-->
          <!--                <a-radio :value="null">-->
          <!--                  <div class="good-list-font">-->
          <!--                    All-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--                <a-radio v-for="tertiaryType in tertiaryTypeList" :value="tertiaryType">-->
          <!--                  <div class="good-list-font">-->
          <!--                    {{ tertiaryType.type }}-->
          <!--                  </div>-->
          <!--                </a-radio>-->
          <!--              </a-radio-group>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <!--        <a-form>-->
        <!--          <a-form-item>-->
        <!--            <template #label>-->
        <!--              <div class="good-list-font">-->
        <!--                一级类型-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <a-radio-group name="primary_type" v-model:value="state.primary_type" @change="select1">-->
        <!--              <a-radio :value="null">-->
        <!--                <div class="good-list-font">-->
        <!--                  All-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--              <a-radio v-for="primaryType in primaryTypeList" :value="primaryType">-->
        <!--                <div class="good-list-font">-->
        <!--                  {{ primaryType.type }}-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--          <a-form-item v-if="secondaryTypeList!=null&&secondaryTypeList.length>0">-->
        <!--            <template #label>-->
        <!--              <div class="good-list-font">-->
        <!--                二级类型-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <a-radio-group name="secondary_type" @change="select2" v-model:value="state.secondary_type">-->
        <!--              <a-radio :value="null">-->
        <!--                <div class="good-list-font">-->
        <!--                  All-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--              <a-radio v-for="secondaryType in secondaryTypeList" :value="secondaryType">-->
        <!--                <div class="good-list-font">-->
        <!--                  {{ secondaryType.type }}-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--          <a-form-item v-if="tertiaryTypeList!=null&&tertiaryTypeList.length>0">-->
        <!--            <template #label>-->
        <!--              <div class="good-list-font">-->
        <!--                三级类型-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <a-radio-group name="tertiary_type" v-model:value="state.tertiary_type" @change="select3">-->
        <!--              <a-radio :value="null">-->
        <!--                <div class="good-list-font">-->
        <!--                  All-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--              <a-radio v-for="tertiaryType in tertiaryTypeList" :value="tertiaryType">-->
        <!--                <div class="good-list-font">-->
        <!--                  {{ tertiaryType.type }}-->
        <!--                </div>-->
        <!--              </a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--        </a-form>-->

        <hr/>
      </a-col>

      <a-col :span="24">
        <div style="display: flex;flex-direction: column;align-items: stretch"
             v-if="state.goodList!=null&&state.goodList.length>0">
          <a-spin :spinning="state.isRefreshing" style="width: 100%" size="large">
          <GoodItemList :good-list="state.goodList"></GoodItemList>
          </a-spin>
          <div style="display: flex;justify-content: center;">
            <a-pagination
                class="show-min-576px"
                v-model:current="state.current"
                :page-size-options="pageSizeOptions"
                :total="state.total"
                show-size-changer
                :page-size="state.pageSize"
                @showSizeChange="onShowSizeChange"
                @change="onPageChange"
                :defaultPageSize="10"
                :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
            >
              <template #buildOptionText="props">
                <span>{{ props.value }}条/页 </span>
              </template>
            </a-pagination>
            <a-pagination
                class="show-max-576px"
                size="small"
                v-model:current="state.current"
                :page-size-options="pageSizeOptions"
                :total="state.total"
                show-size-changer
                :page-size="state.pageSize"
                @showSizeChange="onShowSizeChange"
                @change="onPageChange"
                :defaultPageSize="10"
            >
            </a-pagination>
          </div>
        </div>
        <div style="display: flex;flex-direction: column;align-items: center;margin-top: 100px;" v-else>
          <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
            <template #description>
              <div class="good-list-font" imageStyle="">
                您搜索的内容没有结果哦
              </div>
            </template>
          </a-empty>
        </div>
      </a-col>
    </a-row>
  </div>

</template>

<script>
import {defineComponent, ref, reactive, computed, watch, onMounted} from "vue";
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {HomeOutlined, UserOutlined} from '@ant-design/icons-vue';
import GoodItemList from "./GoodItemList.vue";
import {searchFavoriteByPage} from "../../api/FavoriteRequest";
import {Empty,notification} from "ant-design-vue";
import {searchGoodByType} from "../../api/GoodRequest";
import {searchTypeAllAsTree} from "../../api/GoodTypeRequest";

export default defineComponent({
  name: "GoodList",
  components: {
    GoodItemList,
    HomeOutlined,
    UserOutlined
  },
  emits: [
    'log'
  ],
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const searchDate = computed(() => {
      return {
        path: route.query,
        params: route.params
      }
    })

    const changeSearchRoot = (type1 = null, type2 = null, type3 = null) => {
      let newRoute = {
        name:route.name,
        params:{

        },
        query:{

        }
      }
      newRoute.params.type = []
      if (type1 != null) newRoute.params.type.push(type1.id.toString())
      if (type2 != null) newRoute.params.type.push(type2.id.toString())
      if (type3 != null) newRoute.params.type.push(type3.id.toString())
      if (searchDate.value.path.text != null) newRoute.query.text = searchDate.value.path.text.toString();
      router.push(newRoute);
    }

    watch([() => route.query,()=>route.params], () => {

      if (searchDate.value.params != null && searchDate.value.params.type != null && searchDate.value.params.type.length > 0) {
        if (typeMap.value.has(searchDate.value.params.type[0])) {
          state.primary_type = typeMap.value.get(searchDate.value.params.type[0])
          if (searchDate.value.params.type.length > 1) {
            if (typeMap.value.has(searchDate.value.params.type[1])) {
              state.secondary_type = typeMap.value.get(searchDate.value.params.type[1])
              if (searchDate.value.params.type.length > 2) {
                if (typeMap.value.has(searchDate.value.params.type[2])) {
                  state.tertiary_type = typeMap.value.get(searchDate.value.params.type[2])
                }
              }
            }
          }
        }
      }

      toSearchGood();
    })

    const typeMap = computed(() => {
      let type = new Map()
      let goodTypeTreeList = store.state.globalInfo.goodTypeTreeList;
      if (goodTypeTreeList != null && goodTypeTreeList.length > 0) {
        for (let i = 0; i < goodTypeTreeList.length; i++) {
          type.set(goodTypeTreeList[i].id, goodTypeTreeList[i])
          if (goodTypeTreeList[i].children != null)
            for (let j = 0; j < goodTypeTreeList[i].children.length; j++) {
              type.set(goodTypeTreeList[i].children[j].id, goodTypeTreeList[i].children[j])
              if (goodTypeTreeList[i].children[j].children != null)
                for (let k = 0; k < goodTypeTreeList[i].children[j].children.length; k++) {
                  type.set(goodTypeTreeList[i].children[j].children[k].id, goodTypeTreeList[i].children[j].children[k])
                }
            }
        }
        funList.forEach(f => f())
        return type
      } else {
        return null
      }
    })

    let funList = []

    onMounted(async () => {
      new Promise((resolve) => {
        if (typeMap.value == null) funList.push(resolve);
        else resolve()
      }).then(() => {
        if (searchDate.value.params != null && searchDate.value.params.type != null && searchDate.value.params.type.length > 0) {
          if (typeMap.value.has(searchDate.value.params.type[0])) {
            state.primary_type = typeMap.value.get(searchDate.value.params.type[0])
            if (searchDate.value.params.type.length > 1) {
              if (typeMap.value.has(searchDate.value.params.type[1])) {
                state.secondary_type = typeMap.value.get(searchDate.value.params.type[1])
                if (searchDate.value.params.type.length > 2) {
                  if (typeMap.value.has(searchDate.value.params.type[2])) {
                    state.tertiary_type = typeMap.value.get(searchDate.value.params.type[2])
                  }
                }
              }
            }
          }
        }
      }).finally(() => {
        toSearchGood();
      })

    })

    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
    const activeKey = ref([]);

    const itemSelectionIndex = ref(null);
    const changeItemSelection = (index) => {
      itemSelectionIndex.value = index;
    }
    //
    const inputValue = ref();

    const showSelectionDrawerState = ref(false);

    const afterShowSelectionDrawerStateChange = () => {

    }

    const state = reactive({
      primary_type: null,
      secondary_type: null,
      tertiary_type: null,
      isRefreshing:false,
      current: 1,
      pageSize: 10,
      total: 0,
      goodList: []
    })

    const primaryTypeList = computed(() => {
      return store.state.globalInfo.goodTypeTreeList
    })
    const secondaryTypeList = computed(() => {
      return state.primary_type == null ? null : state.primary_type.children
    })
    const tertiaryTypeList = computed(() => {
      return state.secondary_type == null ? null : state.secondary_type.children
    })

    const pageSizeOptions = ref(['10', '20', '30', '40', '50']);


    const toSearchGood = async () => {

      if (state.isRefreshing) return;
      state.isRefreshing = true;

      await searchGoodByType(
          (route.params==null||route.params.type==null||route.params.type.length==0)?null:route.params.type[route.params.type.length-1],
          state.current,
          state.pageSize,
          typeof searchDate.value.path.text == 'string' ? searchDate.value.path.text : null
      ).then((res) => {
        if (res.data.result != undefined) {
          if (res.data.result.current != null) state.current = res.data?.result?.current
          if (res.data.result.total != null) state.total = res.data?.result?.total
          if (res.data.result.size != null) state.pageSize = res.data?.result?.size
          //@ts-ignored
          if (res.data.result.records != null) state.goodList = res.data?.result?.records
        }
      }).catch((res) => {
        notification['success']({
          message: 'Action Success',
        });
      }).finally(()=>{
        state.isRefreshing = false;
      })
    }

    const onPageChange = async (val) => {
      if (typeof val === 'string') val = Number.parseInt(val)
      state.current = val;
      await toSearchGood();
    }

    const onShowSizeChange = async (current, pageSize) => {
      state.pageSize = typeof pageSize == 'number' ? pageSize : Number.parseInt(pageSize);
      await toSearchGood();
    };

    const select1 = () => {
      state.secondary_type = null;
      state.tertiary_type = null;
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }
    const select2 = () => {
      state.tertiary_type = null;
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }
    const select3 = () => {
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }

    return {
      select1,
      select2,
      select3,
      primaryTypeList,
      toSearchGood,
      onPageChange,
      onShowSizeChange,
      pageSizeOptions,
      secondaryTypeList,
      tertiaryTypeList,
      changeSearchRoot,
      state,
      typeMap,
      inputValue,
      searchDate,
      activeKey,
      text,
      itemSelectionIndex,
      changeItemSelection,
      showSelectionDrawerState,
      afterShowSelectionDrawerStateChange,
      Empty
    }

  }
})
</script>

<style scoped lang="less">
.good-list-outer-outer {
  padding: 10px 70px;

  @media screen and (max-width: 1200px) {
    padding: 10px 30px;
  }
  @media screen and (max-width: 768px) {
    padding: 10px 10px;
  }
  @media screen and (max-width: 576px) {
    padding: 10px 5px;
  }
}

.good-list-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}

.ant-form-item {
  margin-bottom: 5px;
}


.show-max-576px {
  @media screen and (min-width: 576px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}
</style>
